<div class="device">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <{foreach from=$shoprealimg item=items}>
            <div class="swiper-slide">
                <img src="<{$items['img']}>"  class="category_img" style="margin:0 auto;width:96%;padding:0px 2px;height:auto;display:block;">
            </div>
            <{/foreach}>
        </div>
    </div>
	 <div class="pagination"></div>
</div>
<link rel="stylesheet"  href="<{$siteurl}>/js/Swiper/idangerous.swiper.css">
<script src="<{$siteurl}>/js/Swiper/idangerous.swiper.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container',{
       pagination: '.pagination',
        loop:true,
        grabCursor: true,
        paginationClickable: true
    })
    $(function(){
        mySwiper.swipeTo(0);
        var allH=$(window).height();
        var allW=$(window).width();
		var allH60 = allH*0.6;
        $('.swiper-container').css({'height':allH60});
        $('.swiper-slide').css({'width':allW,'height':''});
        $('.swiper-slide img').css({'maxHeight':allH60});
    });
</script>

<style>
 
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:0px;
  width: 100%;
  z-index:9999999;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius:50%;
  background: #A1A1A1;
   margin: 0 3px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #FD5959;
}
.swiper-slide{float:left;}
    .device {
        width: 100%;
        position: relative;
    }
    .swiper-container {
        
        width: 100%;
    }
</style>